<template>
	<view class="container">
		<Masks v-if="show_mask" @hideClick="hideMask()"></Masks>
		<view>
			<view style="display: flex;align-items: center;justify-content: center;margin: 30rpx;">
				<image style="width: 180rpx;height: 180rpx" src="../../static/temp/gou.png"></image>
			</view>
			<view style="font-size: 36rpx;font-weight: 800;text-align: center;">接龙成功</view>
			<view style="text-align: center;padding: 40rpx 100rpx;color: #808080;font-size: 28rpx;">
				<text>可将此接龙转发到微信群聊</text>
				<text>活跃群氛围，通知大家你已接龙成功~</text>
			</view>
			<view style="display: flex;justify-content: center;flex-direction: column;">
				<view class="btn" style="background: #23A948;color: #FFFFFF;padding: 20rpx 130rpx;" @click="share()">转发到微信</view>
				<view class="btn" style="color: #23A948;border: 1px solid #23A948;" @click="toDetail()" >返回接龙详情页</view>
				<view class="btn" style="color: #23A948;border: 1px solid #23A948;" @click="navTo()" >查看接龙订单记录</view>
			</view>
			<view v-if="show_share" class="bottom_menu" style="background: #F5F5F5;z-index: 3;">
				<view class="share-list">
					<view class="share-item" @click="openCard()">
						<image src="/static/temp/share_wechat.png"></image>
						<text>分享到微信</text>
					</view>
					<view class="share-item" @click="openPoster()">
						<image src="/static/temp/share_moment.png"></image>
						<text>生成发圈海报</text>
					</view>
				</view>
				<view class="bottom-btn-share b-t" @click="cancelShare()">取消</view>
			</view>
			<!-- 分享卡片 -->
			<view v-if="show_card" style="position: fixed; z-index: 3; left: 0; right: 0;top: 0;text-align: center; color: #FFFFFF; padding: 20rpx; font-size: 32rpx; font-weight: 800;">分享卡片预览</view>
			<view v-if="show_card" class="share_card">
				
				<view style="display: flex;align-items: center;	padding: 30rpx;">
					<image src="/static/temp/kt.png" style="width: 48rpx;height: 48rpx;"></image>
					<text style="padding: 0rpx 10rpx;color: #333333;font-size: 28rpx;">好团团接龙</text>
				</view>
				<view style="padding: 0rpx 30rpx;">{{share_data[0].title}}</view>
				<swiper style="height: 560rpx;margin: 20rpx " @change="changeShare" :indicator-dots="true" indicator-active-color="#23A948">
					<swiper-item v-for="(item,index) in share_data" :key="index">
						<image :src="item.share_img"  mode="aspectFit"></image>
					</swiper-item>
				</swiper>
				<view style="margin: 30rpx;">
					<button style="height: 70rpx !important;line-height: 70rpx !important;background: #23A948;color:#FFFFFF !important;font-size: 28rpx;"  open-type="share">立即分享</button>
				</view>
			</view>
			<view v-if="show_poster" style="position: fixed; z-index: 3; left: 0; right: 0;top: -12rpx;text-align: center; color: #FFFFFF; padding: 20rpx; font-size: 32rpx; font-weight: 800;">分享海报预览</view>
			<view v-if="show_poster" style="position: fixed;top:32rpx;left: 0;right: 0;margin: 20rpx;z-index: 3;text-align: center;">
				<image style="height: 900rpx;" show-menu-by-longpress :src="share_poster" mode="heightFix"></image>
				<view style="margin:0rpx 40rpx 6rpx 40rpx;">
					<button style="height: 70rpx !important;line-height: 70rpx !important;background: #23A948;color:#FFFFFF !important;font-size: 28rpx;" @click="savePic(share_poster)">保存图片</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Masks from '@/components/mask';
	import {mapMutations} from 'vuex';
	import Api from '@/common/api';
	export default{
		components: {
			Masks,
		},
		data(){
			return {
				drag_id:0,
				drag_info:{},
				show_share:false,
				show_mask:false,
				show_card:false,
				show_poster:false,
				share_data:{},
				current_share:{},
				share_poster:''
			}
		},
		onLoad(option){
			this.drag_id = option.id
			this.loadDetail()
		},
		onShow(){
		},
		onReachBottom(){
		},
		onShareAppMessage(res){
			return {
				title:this.current_share.title,
				path:'/pages/record/detail?id='+this.current_share.dragon_id+'&leader_id='+this.current_share.user_id,
				imageUrl:this.current_share.share_img,
				
			}
			
		},
		methods: {
			...mapMutations(['login']),
			savePic(url){
				let that =this;
				uni.downloadFile({
					url:url,
					success:((res)=>{
						uni.saveImageToPhotosAlbum({
							filePath:res.tempFilePath,
							fail:((err)=>{
								if(err.errMsg!='saveImageToPhotosAlbum:fail cancel'){
									that.$api.msg(`保存图片失败`)
								}
							}),
							success:(()=>{
								that.$api.msg(`图片已保存`)
								that.hideMask()
							})
						})
					}),
					fail:((err)=>{
						
						that.$api.msg(`保存图片失败`)
					})
				})
				
			},
			changeShare(e){
				this.current_share = this.share_data[e.detail.current]
			},
			async openPoster(){
				this.show_card=false;
				this.show_poster=true;
				let data = await Api.apiCall('post',Api.apiName.create_share_poster,{dragon_id:this.drag_id});
				if(!data){
					return;
				}
				this.share_poster=data.data;
			},
			async openCard(){
				this.show_card=true;
				this.show_poster=false;
				let data = await Api.apiCall('post',Api.apiName.create_share_card,{dragon_id:this.drag_id});
				if(!data){
					return;
				}
				this.share_data =data.data;
				if(data.data.length>0){
					this.current_share =data.data[0]
				}
			},
			hideMask(){
				this.show_mask=false;
				this.show_share=false;
				this.show_card=false;
				this.show_poster=false;
			},
			share(){
				this.show_mask=true;
				this.show_share=true;
			},
			navTo(){
				uni.switchTab({
					url:'/pages/record/index'
				})
			},
			toDetail(){
				uni.navigateTo({
					url:'/pages/record/detail?id='+this.drag_id+'&leader_id='+this.drag_info.user_id
				})
			},
			async loadDetail(){
				let data = await Api.apiCall('get',Api.apiName.purchase_detail,{id:this.drag_id},true);
				if(!data){
					return;
				}
				this.drag_info=data.data;
			},
		},

	}
</script>

<style lang='scss'>
	page{
		background: #fff;
	}
	.btn{
		padding: 18rpx 130rpx;
		margin: 30rpx 60rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		text-align: center;
	}
	button{
		/* background: none !important; */
		line-height: 39rpx !important;
		height: 39rpx !important;
		font-size: 28rpx !important;
		color:#FFFFFF !important;
	}
	button::after{
		border: none !important;
	}
	.bottom_menu{
		position: fixed;
		bottom: 0rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		width: 100%;
		background: #FFFFFF;
		z-index: 3;
	}
	.share-list{
		display:flex;
		flex-wrap: wrap;
		background: #FFFFFF;
		margin-bottom: 100rpx;
		justify-content: center;
	}
	.share-item{
		min-width: 50%;
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 180upx;
		image{
			width: 80upx;
			height: 80upx;
			margin-bottom: 16upx;
		}
		text{
			font-size: $font-base;
			color: #333333;
			margin-top: 10rpx;
		}
	}
	.bottom-btn-share{
		position:absolute;
		left: 0;
		bottom: 0;
		display:flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 90upx;
		background: #fff;
		z-index: 9;
		font-size: $font-base + 2upx;
		color: $font-color-dark;
	}
	.cpt-mask{
		top: 0 !important;
	}
	.share_card{
		position: fixed;
		top: 5%;
		left: 0;
		right: 0;
		z-index: 3;
		background: #FFF;
		margin: 30rpx;
		border-radius: 10rpx;
	}
</style>
